<template>
  <div>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          v-for="param in initParam"
          :prop="param.prop"
          :label="param.label">
          <template scope="scope">
            <el-input size="small" class="tb-input" v-model="scope.row[param.prop]" autofocus="autofocus"></el-input>
          </template>
        </el-table-column>
        <el-table-column width="40">
            <template scope="scope">
                <el-button size="small" type="text" @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-close"></i></el-button>
            </template>
        </el-table-column>
      </el-table>
  </div>
</template>

<style>
  .tb-input input{
    border: none;
  }
</style>

<script>
export default {
  name: 'HelloWorld',
  mounted(){
  },
  watch: {
    tableData: {
      handler() {
        let data = this.tableData
        console.log(data)
        let result = data.length == 0 ? false : this.isEmpty(data[data.length - 1])
        if(!result){
          data.push({})
        }
        return false
      },
      deep: true,
      immediate: true
    }
  },
  props: [
    'initParam',
    'initData'
  ],
  mounted(){
    console.log(this.initData)
    this.tableData = this.initData
  },
  data() {
    return {
      tableData: []
    }
  },
  methods: {
    addRow(){
      this.tableData.push({})
    },
    handleDelete(index, row){
      this.tableData.splice(index, 1)
    },
    isEmpty(obj){
      var result = true
      if(obj) {
        for(var p in this.initParam){
          var key = this.initParam[p]['prop']
          var value = obj[key]
          if(value != null && value != ''){
            return false
          }
        }
      }
      return result
    }
  }
}
</script>
